<template>
  <div class="asklist">
    <ul>
      <li v-for="(item, idx) in tabData" :key="idx" class="list">
        <router-link :to="{path:'/details', query:{id: item.id}}">
          <div class="listTop">
            <div style="display:flex;align-items:center;">
              <div class="head">
                <img src="../../../assets/home/01.jpg" alt>
              </div>
              <span style="margin-left:10px;">{{ item.user }}</span>
              <span style="margin-left:10px;">回答了问题</span>
            </div>
            <span style="float:right">{{ item.stu_time }}</span>
          </div>
          <a class="main">
            <h4 class="Conbt">{{ item.title }}</h4>
            <div class="Context">
              <p>{{ item.answerCon }}</p>
            </div>
            <div class="botTag">
              <div v-if="item.showtab">
                <el-tag v-for="(tag, index) in item.tags" :key="index" type="success" style="margin-left:10px">{{ tag }}</el-tag>
              </div>
              <div style="color:#959595;">
                <span>{{ item.look }} <i class="el-icon-view"/></span>
                <span>{{ item.good }} <span class="iconfont">&#xe63c;</span></span>
              </div>
            </div>
          </a>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { getList } from '@/api/ask'
import { formatTime } from '@/utils/index.js'
export default {
  props: {
    active: {
      type: [String, Number],
      default: '0'
    }
  },
  data() {
    return {
      idx: '',
      tabData: []
    }
  },
  watch: {
    active: function(val) {
      if (val === '0') {
        this.getData('jxAsk')
      }
      if (val === '1') {
        this.getData('payAsk')
      }
      if (val === '2') {
        this.getData('newAsk')
      }
      if (val === '3') {
        this.getData('waitAsk')
      }
    }
  },
  methods: {
    getData(type) {
      getList(1, type).then((res) => {
        this.tabData = []
        this.tabData = res.data
        for (let i = 0; i < this.tabData.length; i++) {
          // 分割tab标签
          this.tabData[i].tags = this.tabData[i].tags.split(',')
          // 格式化时间
          this.tabData[i].stu_time = formatTime(this.tabData[i].stu_time)
          if (this.tabData[i].tags.length > 0) {
            this.tabData[i].showtab = true
          } else {
            this.tabData[i].showtab = false
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.asklist {
  width: 780px;
  ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
  }
  .Conbt {
    font-size: 16px;
    font-weight: 540;
    padding-top: 15px;
  }
  .main {
    .Context {
      font-size: 14px;
      padding-bottom: 20px;
      line-height: 26px;
      p {
        position: relative;
        line-height: 20px;
        max-height: 40px;
        overflow: hidden;
        }
        &:after {
          content: "";
          position: absolute;
          bottom: 0;
          right: 0;
          padding-left: 40px;
          background: linear-gradient(to right, transparent, #fff 55%);
      }
    }
    .botTag {
      margin-top: 10px;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
  .list {
    padding: 30px;
    background: #ffffff;
    border: 1px solid #ECECEC;
    margin-bottom: 20px;
    &:hover {
      box-shadow: 0px 1px 1px #f0f0f0;
    }
    .listTop {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      span:nth-last-child() {
        color: #666;
      }
      .head {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
